<template>
  <a-layout>
    <a-layout-content style="margin: 0 16px">
      <a-card style="margin: 16px 0; text-align:center">
        <!-- 搜索栏 -->
        <a-row>
          <a-col :span="8">
            <a-form-item :labelCol="{ span: 5, offset: 1 }" :wrapperCol="{ span: 1, offset: 1 }" label="系统名称：">
              <a-select :default-value="selectSystemName" v-model="selectSystemName" style="width: 180px"
                @change="handleSystemNameChange">
                <a-select-option v-for="(system, index) in systemArray" :key="index" :value="system.name">
                  {{ system.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :labelCol="{ span: 5, offset: 1 }" :wrapperCol="{ span: 1, offset: 1 }" label="环境名称：">
              <a-select :default-value="selectEnvironmentName" v-model="selectEnvironmentName" style="width: 180px"
                @change="handleEnvironmentNameChange">
                <a-select-option v-for="(environment, index) in environmentArray" :key="environment.name">
                  {{ environment.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :labelCol="{ span: 5, offset: 1 }" :wrapperCol="{ span: 1, offset: 1 }" label="服务名称：">
              <a-select :default-value="selectServiceName" v-model="selectServiceName" style="width: 180px"
                @change="handleServiceNameChange">
                <a-select-option v-for="(service, index) in serviceArray" :key="service.name">
                  {{ service.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :labelCol="{ span: 5, offset: 1 }" :wrapperCol="{ span: 1, offset: 1 }" label="METHOD：">
              <a-select :default-value="selectMethod" v-model="selectMethod" style="width: 180px"
                @change="handleMethodChange">
                <a-select-option :value="httpMethod.post">
                  {{ httpMethod.post }}
                </a-select-option>
                <a-select-option :value="httpMethod.get">
                  {{ httpMethod.get }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :labelCol="{ span: 5, offset: 1 }" :wrapperCol="{ span: 1, offset: 1 }" label="URL：">
              <a-input v-model="url" style="width: 500px" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
          </a-col>
          <a-col :span="8">
          </a-col>
          <a-col :span="8">
            <a-button type="primary" @click="search">搜索</a-button>
            <a-button type="primary" @click="reset">重置</a-button>
          </a-col>
        </a-row>
        <a-row>
          <a-button type="primary" class="editable-add-btn" @click="showModal()">
            添加
          </a-button>
        </a-row>
        <!-- 表格 -->
        <a-row>
          <a-table :columns="tableColumns" :data-source="tableData" bordered :rowKey="(record, index) => index + 1"
            :scroll="{ x: 1500, y: 300 }">
            <template v-for="col in ['name']" :slot="col" slot-scope="text, record, index">
              <div>
                <a-input v-if="record.editing" style="margin: -5px 0" :value="text"
                  @change="e => handleChange(e.target.value, record.key, col)" />
                <template v-else>
                  {{ text }}
                </template>
              </div>
            </template>
            <template slot="operation" slot-scope="text, record, index">
              <div class="editable-row-operations">
                <span v-if="record.editing">
                  <a @click="() => save(record.key)">确定</a>
                  <a-popconfirm title="是否确定取消?" ok-text="确定" cancel-text="取消" @confirm="() => cancel(record.key)">
                    <a>取消</a>
                  </a-popconfirm>
                </span>
                <span v-else>
                  <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
                  <a-popconfirm v-if="tableData.length" title="确定删除?" ok-text="确定" cancel-text="取消"
                    @confirm="() => delete_(record.key)">
                    <a href="javascript:;">删除</a>
                  </a-popconfirm>
                  <a :disabled="editingKey !== ''" @click="() => openDetail(record)">详细</a>
                </span>
              </div>
            </template>
          </a-table>
        </a-row>
      </a-card>
    </a-layout-content>
    <!-- 详细信息 -->
    <a-drawer width="300" placement="right" :closable="false" :visible="detailVisibale" @close="closeDetail()">
      <p class="drawer-title">
        详细信息
        <a-row type="flex">
          <a-col flex="100px">系统名称：</a-col>
          <a-col flex="auto">{{ systemName_inDetail }}</a-col>
        </a-row>
      </p>
    </a-drawer>
    <!-- 添加 -->
    <a-modal :visible="modalVisible" title="添加接口" okText='确认' cancel-text="取消" @cancel="handleModalCancel"
      @ok="handleModalOk" :destroyOnClose="destroyOnClose">
      <!--表单 并将表单的值绑定到this.from-->
      <a-form layout='vertical'>
        <!--每一项元素-->
        <a-form-item label='系统名称：' :labelCol="{ span: 5, offset: 1 }" :wrapperCol="{ span: 1, offset: 1 }">
          <a-select :default-value="selectSystemNameInModal" v-model="selectSystemNameInModal" style="width: 180px"
            @change="handleSystemNameChange">
            <a-select-option v-for="(system, index) in systemArrayInModal" :key="index" :value="system.name">
              {{ system.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="环境名称：" :labelCol="{ span: 5, offset: 1 }" :wrapperCol="{ span: 1, offset: 1 }">
          <a-select :default-value="selectEnvironmentNameInModal" v-model="selectEnvironmentNameInModal" style="width: 180px"
            @change="handleEnvironmentNameChange">
            <a-select-option v-for="(environment, index) in environmentArrayInModal" :key="environment.name">
              {{ environment.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="服务名称：" :labelCol="{ span: 5, offset: 1 }" :wrapperCol="{ span: 1, offset: 1 }">
          <a-select :default-value="selectServiceNameInModal" v-model="selectServiceNameInModal" style="width: 180px"
            @change="handleServiceNameChange">
            <a-select-option v-for="(service, index) in serviceArrayInModal" :key="service.name">
              {{ service.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="METHOD：" :labelCol="{ span: 5, offset: 1 }" :wrapperCol="{ span: 1, offset: 1 }">
          <a-select :default-value="selectMethodInModal" v-model="selectMethodInModal" style="width: 180px"
            @change="handleMethodChange">
            <a-select-option :value="httpMethod.post">
              {{ httpMethod.post }}
            </a-select-option>
            <a-select-option :value="httpMethod.get">
              {{ httpMethod.get }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="URL：" :labelCol="{ span: 5, offset: 1 }" :wrapperCol="{ span: 1, offset: 1 }">
          <a-input v-model="urlInModal" v="url" style="width: 200px"
            v-decorator="['urlInModal', { rules: [{ required: true, message: '请输入URL!' }] }]" />
        </a-form-item>
        <a-form-item label="参数类型：" :labelCol="{ span: 5, offset: 1 }" :wrapperCol="{ span: 1, offset: 1 }">
          <a-select default-value="form" v-model="selectParameteTypeInModal" style="width: 180px" @change="handleMethodChange">
            <a-select-option value="form">
              form
            </a-select-option>
            <a-select-option value="path">
              path
            </a-select-option>
            <a-select-option value="queryString">
              queryString
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="参数：" :labelCol="{ span: 5, offset: 1 }" :wrapperCol="{ span: 1, offset: 1 }">
          <a-input v-model="parameterInModal" v="parameter" style="width: 200px"
            v-decorator="['parameterInModal', { rules: [{ required: true, message: '请输入参数!' }] }]" />
        </a-form-item>
        <a-form-item label="header：" :labelCol="{ span: 5, offset: 1 }" :wrapperCol="{ span: 1, offset: 1 }">
          <key-value-input class_="ant-input" style_="width: 100px"></key-value-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-layout>
</template>
<script>
import { defaultSelect_, systemArray_, environmentArray_, serviceArray_, tableColumns, tableData } from '@/views/configuration/api/data/configData.js'
import httpMethod from '@/components/http-method.js'
export default {
  //el 创建前
  beforeCreate() {
    //创建表单

  },
  created() {
    /********************************* 搜索栏 *****************************/
    // 在搜索栏中，初始化系统名称、环境名称、服务名称、METHOD下拉列表，在数组最前边添加一个元素，并将第一个元素设置为默认值
    Object.assign(this.systemArray, systemArray_);
    this.systemArray.unshift(defaultSelect_);
    this.selectSystemName = this.systemArray[0].name;

    Object.assign(this.environmentArray, environmentArray_);
    this.environmentArray.unshift(defaultSelect_);
    this.selectEnvironmentName = this.environmentArray[0].name;

    Object.assign(this.serviceArray, serviceArray_);
    this.serviceArray.unshift(defaultSelect_);
    this.selectServiceName = this.serviceArray[0].name;

    this.selectMethod = defaultSelect_.name;

    /********************************* 添加对话框 *****************************/
    // 在弹出的对话框中，初始化系统名称、环境名称、服务名称、METHOD下拉列表，并将第一个元素设置为默认值
    Object.assign(this.environmentArrayInModal, environmentArray_);
    this.selectEnvironmentNameInModal = this.environmentArrayInModal[0].name;

    Object.assign(this.systemArrayInModal, systemArray_);
    this.selectSystemNameInModal = this.systemArrayInModal[0].name;

    Object.assign(this.serviceArrayInModal, serviceArray_);
    this.selectServiceNameInModal = this.serviceArrayInModal[0].name;

    // 初始化method下来列表，默认选择“POST”
    this.selectMethodInModal = httpMethod.method.post;
  },
  data() {
    return {
      /************************ 搜索栏中用到的变量 **********************/
      /**
       * 系统名称列表
       */
      systemArray: [],
      /**
       * 被选中的系统名称
       */
      selectSystemName: '',
      /**
       * 环境名称列表
       */
      environmentArray: [],
      /**
       * 被选中的环境名称
       */
      selectEnvironmentName: '',
      /**
       * 服务名称列表
       */
      serviceArray: [],
      /**
       * 被选中的服务名称
       */
      selectServiceName: '',
      /**
       * 被选中的method
       */
       selectMethod: '',
      /**
      * url
      */
      url: '',
      /************************ 添加对话框中用到的变量 **********************/
      destroyOnClose: true,
      /**
       * 系统名称列表
       */
       systemArrayInModal: [],
      /**
       * 被选中的系统名称
       */
       selectSystemNameInModal: '',
       /**
       * 环境名称列表
       */
      environmentArrayInModal: [],
       /**
       * 被选中的环境名称
       */
      selectEnvironmentNameInModal: '',
      /**
       * 服务名称列表
       */
       serviceArrayInModal: [],
      /**
       * 被选中的服务名称
       */
       selectServiceNameInModal: '',
      /**
       * 被选中的method
       */
      selectMethodInModal: '',
      /**
       * http的method
       */
      httpMethodInModal: {},
      /**
      * url
      */
      urlInModal: '',
      /**
       * 参数类型
       */
      selectParameteTypeInModal: '',
      /**
      * 接口参数
      */
      parameterInModal: '',
      /************************ 表格中用到的变量 **********************/
      /**
       * 表格的数据
       */
      tableData,
      cacheData: tableData.map(item => ({ ...item })),
      /**
       * 表格的列
       */
      tableColumns,
      /**
       * 当前正在编辑的这条记录的key，如果为空字符串则表示此时没有记录处于被编辑状态
       */
      editingKey: '',
      /**
       * 详细信息是否可见
       */
      detailVisibale: false,
      /**
       * 系统名称，在详细信息弹出框中
       */
      systemName_inDetail: '',
      /**
       * 添加模态框是否显示
       */
      modalVisible: false,
      /**
       * 表示http的method
       */
      httpMethod: httpMethod.method,
    };
  },
  methods: {
    /**
     * 搜索按钮
     */
    search() {
      console.debug(`搜索的内容为：${this.url}`);
    },
    /**
     * 重置按钮
     */
    reset() {
      this.selectSystemName = defaultSelect_.name;
      this.selectEnvironmentName = defaultSelect_.name;
      this.selectServiceName = defaultSelect_.name;
      this.selectMethod = defaultSelect_.name;
      this.url = '';
    },
    /**
     * 系统名称列表内容变化时
     * @param {*} value 
     * @param {*} key 
     * @param {*} column 
     */
    handleSystemNameChange(value, key, column) {
      // const newData = [...this.data];
      // const target = newData.find(item => key === item.key);
      // if (target) {
      //   target[column] = value;
      //   this.data = newData;
      // }
      console.debug('方法handleSystemNameChange被调用');
    },
    /**
     * 环境名称列表内容变化时
     * @param {*} value 
     * @param {*} key 
     * @param {*} column 
     */
    handleEnvironmentNameChange(value, key, column) {
      console.debug('方法handleEnvironmentNameChange被调用');
    },
    /**
     * 服务名称列表内容变化时
     * @param {*} value 
     * @param {*} key 
     * @param {*} column 
     */
    handleServiceNameChange(value, key, column) {
      console.debug('方法handleServiceNameChange被调用');
    },
    /**
     * METHOD列表内容变化时
     * @param {*} value 
     * @param {*} key 
     * @param {*} column 
     */
    handleMethodChange(value, key, column) {
      console.debug('方法handleMethodChange被调用');
    },
    /**
     * 编辑按钮
     * @param {*} key 
     */
    edit(key) {
      const newData = [...this.tableData];
      const target = newData.find(item => key === item.key);
      this.editingKey = key;
      if (target) {
        target.editing = true;
        this.tableData = newData;
      }
    },
    /**
     * 编辑按钮-->确定按钮
     * @param {*} key 
     */
    save(key) {
      const newData = [...this.tableData];
      const newCacheData = [...this.cacheData];
      const target = newData.find(item => key === item.key);
      const targetCache = newCacheData.find(item => key === item.key);
      if (target) {
        delete target.editing;
        this.tableData = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = '';
    },
    /**
     * 弹出框的确定按钮
     * @param {*} key 
     */
    cancel(key) {
      const newData = [...this.tableData];
      const target = newData.find(item => key === item.key);
      this.editingKey = '';
      if (target) {
        Object.assign(target, this.cacheData.find(item => key === item.key));
        delete target.editing;
        this.tableData = newData;
      }
    },
    /**
     * 点击删除按钮，删除一条记录
     * @param {*} key 
     */
    delete_(key) {
      const dataSource = [...this.tableData];
      this.tableData = dataSource.filter(item => item.key !== key);
    },
    /**
     * 打开详细信息弹窗
     */
    openDetail(record) {
      this.detailVisibale = true;
      this.systemName_inDetail = record.name;
    },
    /**
     * 关闭详细信息弹窗
     */
    closeDetail() {
      this.detailVisibale = false;
    },
    /**
     * 显示添加模态框
     */
    showModal() {
      // 清除之前的错误提示，回复默认值
      this.selectSystemNameInModal = defaultSelect_.name;
      this.selectEnvironmentNameInModal = defaultSelect_.name;
      this.selectServiceNameInModal = defaultSelect_.name;
      this.selectMethodInModal = this.httpMethod.post;
      this.urlInModal = '';
      this.selectParameteTypeInModal = 'form';
      this.parameterInModal = '';
      this.modalVisible = true;
    },
    /**
     * 关闭添加模态框
     */
    handleModalCancel(e) {
      // 清除之前的错误提示，回复默认值
      this.modalVisible = false;
    },
    /**
     * 点击添加模态框上的确认按钮
     */
    handleModalOk(e) {
      const form = this.addApiModalForm;
      form.validateFields((err, value) => {
        if (err) {
          return;
        }
        console.log(`form 表单内容: &{value}`);
        form.resetFields();
        this.modalVisible = false;
        // 将记录添加到表格的第一行
        this.tableData.unshift({ key: value, name: value.systemName });
      });
    },
  },
};
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}

.editable-add-btn {
  /* margin-bottom: 8px; */
  float: left;
}

p.drawer-title {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
  display: block;
  margin-bottom: 16px;
  margin-bottom: 24px;
}
</style>
